<!DOCTYPE html>
<head>
    <title>头尾部固定</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
        display: -webkit-flex;
        min-height: 100vh;
        flex-direction: column;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
    }
    header,footer{
        height: 100px;
        background-color: #20b;
        line-height: 100px;
        color: #fff;
    }
    .middle{
        flex: 1;

    }
</style>
<body>

<div class="container">
    <header>头部</header>
    <div class="middle">中间部分</div>
    <footer>尾部</footer>
</div>
</body>

</html>